<template>
  <div class="bg">
    <Category title="美食">
      <img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
      <a slot="footer"  href="http://www.baidu.com" class="more">更多美食</a>
    </Category>
    <Category title="游戏">
      <ul slot="center">
        <li v-for="(g,index) in games" :key="index">
          {{g}}
        </li>
      </ul>
      <div slot="footer" class="foot">
        <a href="http://www.baidu.com/">单机游戏</a>
        <a href="http://www.baidu.com/">网络游戏</a>
      </div>
    </Category>
    <Category title="电影">
      <video slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
      <!--  只有template标签可以使用v-slot:xxx 的形式   -->
      <template v-slot:footer>
        <div class="foot">
          <a href="http://www.baidu.com">经典</a>
          <a href="http://www.baidu.com">热门</a>
          <a href="http://www.baidu.com">推荐</a>
        </div>
        <h4 class="welcome">欢迎前来观影！</h4>
      </template>
    </Category>
  </div>
</template>

<script>
import Category from "@/components/Category";
export default {
  name: "App",
  components: {Category},
  data(){
    return{
        food:["火锅","烧烤","小龙虾","牛排"],
        games:["红色警戒","穿越火线","劲舞团","超级玛丽"],
        movies:["《教父》","《拆弹专家》","《你好，李焕英》","《无间道》"]
    }
  },
  methods:{
  }
}
</script>

<style lang="less">
.bg{
    display: flex;
    justify-content: space-around;
    margin-top: 100px;
  img{
    width: 100%;
  }
  video{
    width: 100%;
  }
  .more{
    display: block;
    text-align: center;
    margin-top: 10px;
  }
  .foot{
    display: flex;
    justify-content: space-around;
  }
  .welcome{
    text-align: center;
  }
}
</style>
